@import "val";
@import "component";

$top: 7rem;
.device-info {
  height: $top;
}

%base-chart {
  display: inline-block;
  height: calc(100% - #{$top});
  vertical-align: top;
}

.device-stat {
  //@extend
  display: inline-block;
  width: 40%;
  height: calc(100% - #{$top});
  vertical-align: top;
}

.device-res {
  display: inline-block;
  width: 60%;
  height: calc(100% - #{$top});
  vertical-align: top;
  p {
    color: $light-text-color;
    text-align: center;
    font-size: 1.2rem;
  }
}

.device-info-container {
  img {
    height: 6rem;
    float: left;
    margin: 0 1rem;
  }
}

.device-info-list {
  overflow: hidden;
  border-bottom: 2px solid #27b272;
}

.device-info-text {
  display: inline-block;
  width: 33.3%;
  padding: .3rem 1rem;
  span {
    color: $light-text-color;
    &:nth-child(1) {
      font-size: 1.5rem;
    }

    &:nth-child(2) {
      margin-left: .5rem;
      font-size: 1.2rem;
    }
  }
}

.device-info-stat {
  text-align: center;
  .device-info-stat-text {
    padding: 0 1rem;
    span {
      color: $light-text-color;
      font-size: 1.4rem;
      &:nth-child(1) {
        font-size: 1.4rem;
        margin-right: .5rem;
      }

    }
  }
}

.device-pie-container {
  width: 100%;
  height: calc(100% - 16rem);
}

.device-current-info {
  color: $light-text-color;
  font-size: 1.2rem;
  p {
    font-weight: bold;
    font-size: 1.3rem;
  }
  .device-current-text {
    span {
      margin-right: .5rem;

    }
  }
}

.device-res-col6 {
  display: inline-block;
  width: 50%;
  height: calc(50% - 2rem);
  vertical-align: top;
}

.device-res-col12 {
  display: inline-block;
  width: 100%;
  height: calc(50% - 2rem);
}

.device-log {
  list-style: inherit;
  margin-left: 2rem;
  color: $light-text-color;
  font-weight: normal;
  font-size: 1rem;
}

.device-log-container {
  //margin-top: 1.2rem;
  font-size: 1.2rem;
  color: #fff;
  //font-weight: bolder;
  //margin-left: 1rem;
}

/*设备参数监控*/

.device-info-box {
  height: calc(100%);
  width: 100%;
  @extend %base-table;
  .ant-table-wrapper {
    box-shadow: none;
    background: transparent;
  }
  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: .8rem 0;
    border-bottom: 0;
  }

  .ant-table-thead {
    background: transparent;
  }
}

.device-press-info {
  height: calc(100%);
  width: 50%;
  display: inline-block;
  vertical-align: top;
}

.device-press-info {
  height: calc(100%);
  width: 50%;
  display: inline-block;
  vertical-align: top;
}

.device-wave-chart {
  height: 30%;
  width: 100%;
}

.device-wave-data {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  height: 40%;
}

@keyframes board-ani {
  0% {
    x: calc(0% + 1.6rem)
  }
  100% {
    x: calc(100% - 4.6rem)
  }
}

.board {
  animation: 10s board-ani 0s infinite linear;
}